<script setup lang="ts">
import { useInit } from './js/index'
import { useRoute } from 'vue-router'
const route = useRoute()
const { info } = useInit(route.query.orderId as string)

/*
路由传值：
    1：query
      传：
         router=useRouter()
         router.push('/xxx?id=123')
      收
         route=useRoute()
         route.query.id
    2:params:
       vue2:  通过name传
          传：
            this.$router.push({
                name:'xxx',
                params:{
                    id:123
                }

            })
          收：this.$route.params.id
        vue3不给用，希望用pinia替代
    3：动态路由匹配
         配制路由
            {
                path:'/xxx/:id?'
            }
          传:
             router=useRouter()
            router.push('/xxx/123')  
          收：
            route=useRoute()
            route.params.id

*/
</script>

<template>
  <div class="order-pay-result-page">
    <cp-nav-bar title="药品支付结果" />
    <div class="result">
      <van-icon name="checked" />
      <p class="price">￥ {{ info?.actualPayment }}</p>
      <p class="status">支付成功</p>
      <p class="tip">订单支付成功，已通知药房尽快发出， 请耐心等待~</p>
      <div class="btn">
        <van-button type="primary" :to="`/order/${$route.query.orderId}`">查看订单</van-button>
        <van-button :to="`/room?orderId=${info?.roomId}`">返回诊室</van-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-pay-result-page {
  padding-top: 46px;
}
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  .van-icon {
    font-size: 75px;
    color: var(--cp-primary);
    margin-top: 60px;
  }
  .price {
    font-size: 22px;
    margin-top: 10px;
  }
  .status {
    color: var(--cp-text3);
  }
  .tip {
    color: var(--cp-tip);
    width: 240px;
    text-align: center;
    margin-top: 20px;
  }
  .btn {
    margin-top: 60px;
    .van-button--primary {
      margin-right: 20px;
    }
  }
  &.error {
    .van-icon {
      color: var(--cp-price);
    }
  }
}
</style>
